<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 定义视图，视图就是用户与其交互的界面的元素 -->
    <p id="counter-text">计数:0</p>
    <button id="add-btn">增加</button>
    <script>
    //定义数据模型(Model)
    const model = {
        count:0
    }
    //视图模型(ViewModel)Vue
    const viewModel = {
        addCounter(){
            //数据模型(Model)
            model.count++;
            //更新视图
            this.updateView();
        },
        updateView(){
            document.getElementById('counter-text').innerText = `计数:${model.count}`;
        }
    }
    document.getElementById('add-btn').addEventListener('click',()=>{
        viewModel.addCounter();
    });
    //ViewModel核心是实现 model和View的解耦合，每个部分只负责自己的职责就可以了
    //而ViewModel可以实现在一个桥梁的作用，关联Model和 View.
    </script>
</body>
</html>